<template>
	<div class="staTableWrap">
        <div class="listTwoList">
            <span class="listTable listTableOne">过去24小时实况值 {{unit}}</span>
            <span class="listTable listTableTwo">未来24小时预报值 {{unit}}</span>
        </div>
        <div class="listFourList" v-for="index in 24" :key="index">
            <span class="listTable listFourTabOne">{{--index}} 时</span>
            <span class="listTable">1.1</span>
            <span class="listTable">--</span>
            <span class="listTable">0</span>
        </div>
	</div>
</template>
<script type="text/javascript">
	export default{
        props:{
            topActive:0
        },
		data () {
			return {
				unit:'°C',
                listData:[]
			}
		},
		mounted (){
            this.initTopActive();
        },
        watch:{
            topActive(){
                this.initTopActive();
            }
        },
		components : {
			
		},
		methods : {
			initTopActive(){
                if(this.topActive == 0){
                    this.unit = '°C';
                }else if(this.topActive == 1){
                    this.unit = 'mm';
                }else if(this.topActive == 2){
                    this.unit = 'm/s';
                }else if(this.topActive == 3){
                    this.unit = '%rh';
                }
            }
		}
	}
</script>
<style type="text/css" lang="less">
	.staTableWrap{
        .listTwoList{
            height:32px;
            overflow:hidden;
            .listTable{
                width:50%;
            }
            .listTableOne{
                background:#9FCB63;
            }
            .listTableTwo{
                background:#E89E6D;
            }
        }
        .listFourList{
            height:32px;
            .listTable{
                width:25%;
            }
        }
        .listTable{
            float:left;
            text-align:center;
            line-height:32px;
            font-size:14px;
            border-right:1px solid #EEEEF9;
            border-bottom:1px solid #EEEEF9;
            box-sizing:border-box;
        }
        .listFourTabOne{
            border-left:1px solid #EEEEF9;
        }
    }
</style>